<template>
  <div class="center-cmp">
    <div class="cc-header">
      <dv-decoration-1 style="width:200px;height:50px;" />
     <div>成果总数</div>
      <dv-decoration-1 style="width:200px;height:50px;" />
    </div>

    <div class="cc-details">
    <!--  <div>设备总数</div>-->
     <!-- <div class="card">{{ achievementCount }}</div>-->
      <div v-for="number in achievementCount.toString().split('')" class="card">{{ number }}</div>

    </div>

    <div class="cc-main-container">
      <div class="ccmc-left">
        <div class="station-info">
          创新项目<span>{{cxCount}}</span>
        </div>
        <div class="station-info">
          创业项目<span>{{cyCount}}</span>
        </div>
      </div>

      <dv-active-ring-chart class="ccmc-middle" :config="config" />

      <div class="ccmc-right">
        <div class="station-info">
          <span>{{sjCount}}</span>实践项目
        </div>

      </div>

      <LabelTag :config="labelConfig" />
    </div>
  </div>
</template>

<script>
import LabelTag from './LabelTag'
import { listAchievement } from "@/api/module/gs/dashuju";

export default {
  name: 'CenterCmp',
  props: ['dialogData'], // 接收传入的 id
  components: {
    LabelTag
  },
  data () {
    return {
      config: {
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        lineWidth: 30,
        radius: '55%',
        activeRadius: '60%'
      },

      labelConfig: {
        data: ['创新项目', '创业项目', '实践项目']
      },
      achievementCount:0,
      cxCount:0,
      cyCount:0,
      sjCount:0,
      queryParams: {

        userId: null,
        resultName: null,
        resultType: null,
        resultIntroduction: null,
        innovationPoint: null,
        competitionExperience: null,
        picturePath1: null,
        picturePath2: null,
        resultCategory: null,
        resultGrade: null,
        resultSource: null,
        resultBackground: null,
        resultMeaning: null,
        projectTime: null,
        technology: null,
        completionUnit: null,
        applyName: null,
        applyNumber: null,
        applyTime: null,
        auditState: null,
        auditTime: null,
        auditName: null,
        auditNumber: null,
        isShow: null,
        firstName: null,
        firstGrade: null,
        firstMajor: null,
        firstNumber: null,
        firstCollege: null,
        firstPhone: null,
        firstIdnumber: null,
        secondName: null,
        secondGrade: null,
        secondMajor: null,
        secondNumber: null,
        secondCollege: null,
        secondPhone: null,
        secondIdnumber: null,
        thirdName: null,
        thirdGrade: null,
        thirdMajor: null,
        thirdNumber: null,
        thirdCollege: null,
        thirdPhone: null,
        thirdIdnumber: null,
        fourthName: null,
        fourthGrade: null,
        fourthMajor: null,
        fourthNumber: null,
        fourthCollege: null,
        fourthPhone: null,
        fourthIdnumber: null,
        fifthName: null,
        fifthGrade: null,
        fifthMajor: null,
        fifthNumber: null,
        fifthCollege: null,
        fifthPhone: null,
        fifthIdnumber: null,
        advisorName1: null,
        advisorTitl1: null,
        advisorMajor1: null,
        advisorNumber1: null,
        advisorName2: null,
        advisorTitl2: null,
        advisorMajor2: null,
        advisorNumber2: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null,
        signingStatus: null,
        cooperativeObject: null,
        resultYear: null,
        sixthName: null,
        sixthGrade: null,
        sixthMajor: null,
        sixthNumber: null,
        sixthCollege: null,
        sixthPhone: null,
        sixthIdnumber: null,
        seventhName: null,
        seventhGrade: null,
        seventhMajor: null,
        seventhNumber: null,
        seventhCollege: null,
        seventhPhone: null,
        seventhIdnumber: null,
        eighthName: null,
        eighthGrade: null,
        eighthMajor: null,
        eighthNumber: null,
        eighthCollege: null,
        eighthPhone: null,
        eighthIdnumber: null,
        ninthName: null,
        ninthGrade: null,
        ninthMajor: null,
        ninthNumber: null,
        ninthCollege: null,
        ninthPhone: null,
        ninthIdnumber: null,
        firstIdentity: null,
        secondIdentity: null,
        thirdIdentity: null,
        fourthIdentity: null,
        fifthIdentity: null,
        sixthIdentity: null,
        seventhIdentity: null,
        eighthIdentity: null,
        ninthIdentity: null
      },
    }
  },
  created() {
    this.getCount();
    this.getCx();
    this.getCy();
    this.getSj();
    this.$watch(
      () => [this.cxCount, this.cyCount, this.sjCount],
      () => {
        this.createData();
      }
    );
  },
  methods: {
    /** 查询成果总数 */
    getCount() {
      this.loading = true;
      const queryParams = { firstCollege: this.dialogData };

      listAchievement(queryParams).then(response => {

        this.achievementCount = response.rows.length;
      });
    },
    /** 查询创新成果总数 */
    getCx() {
      this.loading = true;
      const queryParams = { resultType: "0", firstCollege: this.dialogData};
      listAchievement(queryParams).then(response => {

        this.cxCount = response.rows.length;
      });
    },
    /** 查询创业成果总数 */
    getCy() {
      this.loading = true;
      const queryParams = { resultType: "1" , firstCollege: this.dialogData};  // 创建一个包含参数的对象
      listAchievement(queryParams).then(response => {

        this.cyCount = response.rows.length;
      });
    },
    /** 查询实践成果总数 */
    getSj() {
      this.loading = true;
      const queryParams = { resultType: "2", firstCollege: this.dialogData };  // 创建一个包含参数的对象
      listAchievement(queryParams).then(response => {

        this.sjCount = response.rows.length;
      });
    },

    createData () {
      const { randomExtend } = this

      this.config = {
        data: [
          {
            name: '创新项目',
            value: this.cxCount
          },
          {
            name: '创业项目',
            value: this.cyCount
          },
          {
            name: '实践项目',
            value: this.sjCount
          },

        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        lineWidth: 30,
        radius: '55%',
        activeRadius: '60%'
      }
    },


  }
}
</script>

<style lang="less">
.center-cmp {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;

  .cc-header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
  }

  .cc-details {
    height: 120px;
    display: flex;
    justify-content: center;
    font-size: 32px;
    align-items: center;

    .card {
      background-color: rgba(4,49,128,.6);
      color: #08e5ff;
      height: 70px;
      width: 70px;
      font-size: 45px;
      font-weight: bold;
      line-height: 70px;
      text-align: center;
      margin: 10px;
    }
  }

  .cc-main-container {
    position: relative;
    flex: 1;
    display: flex;

    .ccmc-middle {
      width: 50%;
      height: 90%;

      .active-ring-name {
        font-size: 20px !important;
      }
    }

    .ccmc-left, .ccmc-right {
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 24px;

      span {
        font-size: 40px;
        font-weight: bold;
      }

      .station-info {
        height: 80px;
        display: flex;
        align-items: center;
      }
    }

    .ccmc-left {
      align-items: flex-end;

      span {
        margin-left: 20px;
      }
    }

    .ccmc-right {
      align-items: flex-start;

      span {
        margin-right: 20px;
      }
    }
  }

  .label-tag {
    position: absolute;
    width: 500px;
    height: 30px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
